import { Button, Col, Form, Input, Row, Select, Space, Drawer, Table, Radio, message, Popconfirm } from 'antd'
import { DeleteOutlined, EditOutlined, FlagFilled, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react'
import { catListAPI, newsListAPI, newsAddAPI, newsEditAPI, newsDelAPI } from '../../service/article';
import moment from 'moment';
import { render } from '@testing-library/react';
import ImageUpLoad from '../../components/ImageUpload';
import MyEditor from '../../components/MyEditor';

function NewsList() {
  //定义状态，用于保存分类列表
  const [catList, setCatList] = useState([])
  //保存抽屉状态
  const [open, setOpen] = useState(false);
  //定义状态保存抽屉标题
  const [drawerTitle, setDrawerTitle] = useState('')
  //获取文章数据列表
  const [newsList, setNewsList] = useState([])
  //定义状态保存图片上传成功后的路径 子组件要传递过来
  const [imageUrl, setImageUrl] = useState();
  //定义状态 保存富文本编辑器内容  子组件要传递过来
  const [html, setHtml] = useState('')
  //定义状态 用于更新列表
  const [a, setA] = useState(0)
  //定义状态保存当前总数据量
  const [total, setTotal] = useState(0)
  //定义状态保存修改的ID
  const [id, setId] = useState()
  //创建表单实例
  const [myForm] = Form.useForm()

  //调用副作用hooks,模拟生命周期
  useEffect(() => {
    //分类列表
    catListAPI().then((res) => {
      // console.log(res);
      setCatList(res.data)
    })
    //文章列表
    newsListAPI().then((res) => {
      // console.log(res);
      //保存列表
      setNewsList(res.data)
      //保存总数据量
      setTotal(res.total)
    })
  }, [a])
  //测试是否接收到子组件传递的路径
  useEffect(() => {
    // console.log('数据已经拿到', imageUrl);
    // console.log('数据已经拿到', html);
  }, [imageUrl, html])

  return <>
    <Space style={{ width: '100%', height: '100%', overflow: 'auto' }} direction='vertical' size='large'>
      <Row>
        <Col span={24}>
          {/* //API layout='inline布局在一行显示 */}
          <Form layout='inline'
            onFinish={async (v) => {
              console.log(v);
              const res = await newsListAPI(v)
              console.log(res);
              setNewsList(res.data)
              setTotal(res.total)
            }}
          >
            <Form.Item name='title'>
              <Input
                placeholder='请输入文章名称'
                style={{ width: 150 }}
              />
            </Form.Item>
            <Form.Item name='cat_id'>
              <Select
                placeholder='文章分类'
                style={{ width: 120 }}
                //API自定义value和label的名称
                fieldNames={{ label: 'cname', value: 'id' }}
                options={catList}
              />
            </Form.Item>
            <Form.Item>
              <Button type='primary' icon={<SearchOutlined />}
                htmlType='submit' //设置为提交按钮属性
              >查询</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Button
            type='primary'
            icon={<PlusOutlined />}
            onClick={() => {
              //打开抽屉组件
              setOpen(true)
              //设置抽屉标题为 新增文章
              setDrawerTitle('新增文章')
            }}
          >新增文章</Button>
        </Col>
      </Row>
      <Row>
        <Col span={24} style={{ paddingBottom: 25 }}>
          <Table dataSource={newsList}
            pagination={{
              total,//总数据量
              defaultCurrent: 1,//默认当前页
              onChange: async (pno) => {
                console.log(pno);
                //请求接口,传递页码
                const res = await newsListAPI({ pno })
                console.log(res);
                setNewsList(res.data)
              }
            }}
            //使用ID作为每条数据的key值
            rowKey='aid'
            columns={[
              {
                title: 'id',
                dataIndex: 'aid',
                key: 'aid',
                align: 'center'
              },
              {
                title: '文章名称',
                dataIndex: 'title',
                key: 'title',
                align: 'center'
              },
              {
                title: '文章分类',
                dataIndex: 'cname',
                key: 'cname',
                align: 'center'
              },
              {
                title: '封面图',
                dataIndex: 'pic',
                key: 'pic',
                align: 'center',
                render: (v, r) => {
                  //将获取的路径渲染成图片
                  // console.log(v,r); 
                  return <img src={v} alt='' style={{ width: 120 }} />
                }
              },
              {
                title: '作者',
                dataIndex: 'author',
                key: 'author',
                align: 'center'
              },
              {
                title: '发布时间',
                dataIndex: 'ctime',
                key: 'ctime',
                align: 'center',
                render: (v) => {
                  // console.log(v);
                  const date = Date.parse(new Date())
                  //时间戳为空时返回当前date
                  if (v === null) {
                    return moment(date).format('YYYY-MM-DD HH:mm:ss')
                  }
                  return <>
                    {moment(v).format('YYYY-MM-DD HH:mm:ss')}

                  </>
                }
              },
              {
                title: '是否推荐',
                dataIndex: 'is_rec',
                key: 'is_rec',
                align: 'center',
                render: (v) => {
                  return v === 1 ? '是' : '否'
                }
              },
              {
                title: '操作',
                dataIndex: 'op',
                key: 'op',
                align: 'center',
                render: (v, r) => {
                  return (
                    <Space>
                      <Button type='primary' icon={<EditOutlined />} size="small"
                        onClick={async () => {
                          console.log(r);
                          //打开抽屉
                          setOpen(true)
                          //抽屉标题
                          setDrawerTitle('编辑文章')
                          myForm.setFieldsValue(r)
                          //设置图片 和详情
                          setImageUrl(r.pic)
                          setHtml(r.detail)
                          //设置id为当前的ID值
                          setId(r.aid)
                        }}
                      />
                      <Popconfirm
                        title="删除提示"
                        description="你确认要删除当前数据吗?"
                        okText="确认"
                        cancelText="取消"
                        onConfirm={async () => {
                          console.log(r);
                          //请求删除接口 异步
                          const res = await newsDelAPI({id: r.aid})
                          console.log(res);
                          if(res.code===200){
                            message.success('文章删除成功')
                            //重新渲染
                            setA(a + 1)
                          }else{
                            message.error('文章删除失败')
                          }
                        }}
                      >
                        <Button type='primary' icon={<DeleteOutlined />} size="small" danger />
                      </Popconfirm>
                    </Space>
                  )
                }
              },
            ]}
          />
        </Col>
      </Row>
    </Space>
    {/* 抽屉组件 */}
    <Drawer
      width={850}
      title={drawerTitle}
      placement="right"
      onClose={() => {
        setOpen(false) //关闭抽屉后清空下面两项
        setImageUrl()
        setHtml('')
        //清除id
        setId()
      }}
      maskClosable={false}
      open={open}
      destroyOnClose
      
    >
      <Form
        form={myForm}
        preserve={false}//点击修改后如果关闭表单 清空内容
        labelCol={{ span: 3 }}
        onFinish={async (v) => {
          console.log(v);
          //如果有id就修改文章，否就添加文章
          if (id) {
            const res = await newsEditAPI({ ...v, pic: imageUrl, detail: html, aid: id })
            console.log(res);
            if (res.code === 200) {
              message.success('文章修改成功')
            }
          } else {
            //请求接口 异步请求
            const res = await newsAddAPI({ ...v, pic: imageUrl, detail: html }) //浅拷贝 除了传入的文件还有之前的图片和内容一起加入
            if (res.code === 200) {
              console.log(res);
              message.success('文章添加成功')
            }
          }
          //改变a的状态 更新视图
          setA(a + 1)
          //关闭抽屉
          setOpen(false)
          //清空图片和富文本编辑器
          setImageUrl()
          setHtml('')
        }}
      >
        <Form.Item label="文章名称" name="title">
          <Input placeholder='请输入文章标题'></Input>
        </Form.Item>
        <Form.Item label="作者" name="author">
          <Input placeholder='请输入作者名称'></Input>
        </Form.Item>
        <Form.Item label="文章分类" name="cat_id">
          <Select
            placeholder='分类'
            style={{ width: 120 }}
            //API自定义value和label的名称
            fieldNames={{ label: 'cname', value: 'id' }}
            options={catList}
          />
        </Form.Item>
        <Form.Item label="封面图片">
          {/* 传递给子组件两个参数 */}
          <ImageUpLoad imageUrl={imageUrl} setImageUrl={setImageUrl} />
        </Form.Item>
        <Form.Item label="文章详情">
          <MyEditor html={html} setHtml={setHtml} />
        </Form.Item>
        <Form.Item label="是否推荐" name="is_rec">
          <Radio.Group>
            <Radio value={1}>是</Radio>
            <Radio value={0}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item style={{ textAlign: "right" }}>
          <Button type='primary' htmlType='submit'>保存</Button>
        </Form.Item>
      </Form>
    </Drawer>
  </>
}

export default NewsList
